<template>
    <div class="addMember">
      <div class="line">*请填写真实信息，一经提交不允许修改。</div>
      <section class="detail-wrapper">
        <ul class="detail">
          <li class="item">
            <div class="content">
              <span class="project">姓名</span>
              <input class="info" type="text" placeholder="请输入真实姓名" v-model="membername"/>
            </div>
          </li>
          <li class="item">
            <div class="content">
              <span class="project">证件</span>
              <span class="info" @click="select('选择证件类型','card')" ref="card">请选择&nbsp;></span>
            </div>
          </li>
          <li class="item">
            <div class="content">
              <span class="project">证件号</span>
              <input class="info" type="text" placeholder="一经填写无法修改，如实填写" v-model="cardNum"/>
            </div>
          </li>
          <li class="item">
            <div class="content">
              <span class="project">性别</span>
              <span class="info" @click="select('选择性别','sex')" ref="sex">必填&nbsp;></span>
            </div>
          </li>
          <li class="item">
            <div class="content">
              <span class="project">生日</span>
              <input class="info" type="text" placeholder="(格式:1995-11-04)" v-model="birthday"/>
            </div>
          </li>
          <li class="item">
            <div class="content">
              <span class="project">地区</span>
              <!--<input class="info" type="text" placeholder="非必填"/>-->
              <span class="info" @click="select('选择地区','area')" ref="area">必填&nbsp;></span>
            </div>
          </li>
          <li class="item">
            <div class="content">
              <span class="project">联系地址</span>
              <input class="info" type="text" placeholder="非必填" v-model="conectArea"/>
            </div>
          </li>
          <li class="item">
            <div class="content">
              <span class="project">手机号</span>
              <input class="info" type="text" placeholder="用于接收预约短信" v-model="phone"/>
            </div>
          </li>
          <li class="item">
            <div class="content">
              <span class="project">邮箱</span>
              <input class="info" type="text" placeholder="非必填" v-model="email"/>
            </div>
          </li>
        </ul>
      </section>
      <section class="btn-wrapper">
        <p class="btn first" @click="_addMember">提交</p>
        <!--<p class="btn second">提交</p>-->
      </section>
      <transition name="picker">
        <div class="picker" v-if="showPicker">
          <div class="header">
            <span class="cancel" @click="hidePicker">取消</span>
            <span class="title">{{pickerTitle}}</span>
            <span class="comfirm" @click="comfirmSele">确认</span>
          </div>
          <div class="content">
            <mu-picker :slots="addressSlots" :visible-item-count="5" @change="addressChange" :values="arr"/>
          </div>
        </div>
      </transition>
      <div class="mask" v-if="showPicker" @click="hidePicker"></div>
    </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  import {addMember} from "../../../api/personal";
  import {ERR_OK} from "../../../api/config";

  const address = {
    '北京': ['北京'],
    '广东': ['广州', '深圳', '珠海', '汕头', '韶关', '佛山', '江门', '湛江', '茂名', '肇庆', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮'],
    '上海': ['上海'],
    '天津': ['天津'],
    '重庆': ['重庆'],
    '辽宁': ['沈阳', '大连', '鞍山', '抚顺', '本溪', '丹东', '锦州', '营口', '阜新', '辽阳', '盘锦', '铁岭', '朝阳', '葫芦岛'],
    '江苏': ['南京', '苏州', '无锡', '常州', '镇江', '南通', '泰州', '扬州', '盐城', '连云港', '徐州', '淮安', '宿迁'],
    '湖北': ['武汉', '黄石', '十堰', '荆州', '宜昌', '襄樊', '鄂州', '荆门', '孝感', '黄冈', '咸宁', '随州', '恩施土家族苗族自治州', '仙桃', '天门', '潜江', '神农架林区'],
    '四川': ['成都', '自贡', '攀枝花', '泸州', '德阳', '绵阳', '广元', '遂宁', '内江', '乐山', '南充', '眉山', '宜宾', '广安', '达州', '雅安', '巴中', '资阳', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州'],
    '陕西': ['西安', '铜川', '宝鸡', '咸阳', '渭南', '延安', '汉中', '榆林', '安康', '商洛'],
    '河北': ['石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定', '张家口', '承德', '沧州', '廊坊', '衡水'],
    '山西': ['太原', '大同', '阳泉', '长治', '晋城', '朔州', '晋中', '运城', '忻州', '临汾', '吕梁'],
    '河南': ['郑州', '开封', '洛阳', '平顶山', '安阳', '鹤壁', '新乡', '焦作', '濮阳', '许昌', '漯河', '三门峡', '南阳', '商丘', '信阳', '周口', '驻马店'],
    '吉林': ['长春', '吉林', '四平', '辽源', '通化', '白山', '松原', '白城', '延边朝鲜族自治州'],
    '黑龙江': ['哈尔滨', '齐齐哈尔', '鹤岗', '双鸭山', '鸡西', '大庆', '伊春', '牡丹江', '佳木斯', '七台河', '黑河', '绥化', '大兴安岭地区'],
    '内蒙古': ['呼和浩特', '包头', '乌海', '赤峰', '通辽', '鄂尔多斯', '呼伦贝尔', '巴彦淖尔', '乌兰察布', '锡林郭勒盟', '兴安盟', '阿拉善盟'],
    '山东': ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '莱芜', '临沂', '德州', '聊城', '滨州', '菏泽'],
    '安徽': ['合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '滁州', '阜阳', '宿州', '巢湖', '六安', '亳州', '池州', '宣城'],
    '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
    '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
    '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州'],
    '广西': ['南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '玉林', '百色', '贺州', '河池', '来宾', '崇左'],
    '江西': ['南昌', '景德镇', '萍乡', '九江', '新余', '鹰潭', '赣州', '吉安', '宜春', '抚州', '上饶'],
    '贵州': ['贵阳', '六盘水', '遵义', '安顺', '铜仁地区', '毕节地区', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'],
    '云南': ['昆明', '曲靖', '玉溪', '保山', '昭通', '丽江', '普洱', '临沧', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州', '大理白族自治州', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州'],
    '西藏': ['拉萨', '那曲地区', '昌都地区', '林芝地区', '山南地区', '日喀则地区', '阿里地区'],
    '海南': ['海口', '三亚', '五指山', '琼海', '儋州', '文昌', '万宁', '东方', '澄迈县', '定安县', '屯昌县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县'],
    '甘肃': ['兰州', '嘉峪关', '金昌', '白银', '天水', '武威', '酒泉', '张掖', '庆阳', '平凉', '定西', '陇南', '临夏回族自治州', '甘南藏族自治州'],
    '宁夏': ['银川', '石嘴山', '吴忠', '固原', '中卫'],
    '青海': ['西宁', '海东地区', '海北藏族自治州', '海南藏族自治州', '黄南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'],
    '新疆': ['乌鲁木齐', '克拉玛依', '吐鲁番地区', '哈密地区', '和田地区', '阿克苏地区', '喀什地区', '克孜勒苏柯尔克孜自治州', '巴音郭楞蒙古自治州', '昌吉回族自治州', '博尔塔拉蒙古自治州', '石河子', '阿拉尔', '图木舒克', '五家渠', '伊犁哈萨克自治州'],
    '香港': ['香港'],
    '澳门': ['澳门'],
    '台湾': ['台北市', '高雄市', '台北县', '桃园县', '新竹县', '苗栗县', '台中县', '彰化县', '南投县', '云林县', '嘉义县', '台南县', '高雄县', '屏东县', '宜兰县', '花莲县', '台东县', '澎湖县', '基隆市', '新竹市', '台中市', '嘉义市', '台南市']
  }
  export default {
    name: "add-member",
    data () {
      return {
        addressSlots: [],
        selectedVal: '',
        showPicker: false,
        arr: ['男'],
        pickerTitle: '',
        target: '',
        sex: '男',
        card: '大陆身份证',
        area: ' ',
        membername: '',
        cardNum: '',
        birthday: '',
        conectArea: '',
        phone: '',
        email: ''
      }
    },
    mounted () {
      this.setTitle('实名认证')
    },
    methods: {
      comfirmSele (){
        this.showPicker = false
        if (!this.selectedVal) {
          this.selectedVal = '必填 >'
        }
        this.$refs[this.target].innerText = this.selectedVal
      },
      select (title,ref) {
        this.showPicker = true
        this.pickerTitle = title
        this.target = ref
        this.selectedVal = this[ref]
        if (ref === 'card') {
          this.arr = ['大陆身份证']
          this.addressSlots = [
            {
              width: '100%',
              textAlign: 'center',
              values: ['大陆身份证', '中国护照', '国外护照', '港澳身份证']
            }
          ]
        } else if (ref === 'sex') {
          this.arr = ['男']
          this.addressSlots = [
            {
              width: '100%',
              textAlign: 'center',
              values: ['男', '女']
            }
          ]
        } else if (ref === 'area') {
          this.arr = ['北京', '北京']
          this.addressSlots = [
            {
              width: '100%',
              textAlign: 'right',
              values: Object.keys(address)
            }, {
              width: '100%',
              textAlign: 'left',
              values: ['北京']
            }
          ]
        }
      },
      hidePicker () {
        this.showPicker = false
      },
      addressChange (value, index) {
        switch (index) {
          case 0:
            this.arr = [value]
            this.selectedVal = value
            if (this.addressSlots[1]) {
              this.addressSlots[1].values = address[value]
            }
            break
          case 1:
            this.arr.push(value)
            this.selectedVal += ' '+value
            break

        }
      },
      _addMember () {
        let param = {
          "name" : this.membername,
          "sex" : (this.sex == '男')? 1:0,
          "birthday" : this.birthday,
          "cardSort" : this.card,
          "cardNum" : this.cardNum,
          "area" : this.$refs.area.innerText,
          "address" : this.conectArea,
          "phone" : this.phone,
          "email" : this.email,
          "default" : 0
        }
        addMember(param).then((res) => {
          let response = res.data
          if (response.code === ERR_OK) {
            this.alertText = response.msg
            this.dialog = true
            setTimeout(() => {
              this.$router.push({
                path: '/personal/familyMembers'
              })
            }, 1000)
          } else {
            this.alertText = response.msg
            this.dialog = true
            setTimeout(() => {
              this.alertText = ''
              this.dialog = false
            }, 1000)
          }
        }).catch((err) => {
          console.log(err)
          this.alertText = '请检查网路'
          this.dialog = true
          setTimeout(() => {
            this.alertText = ''
            this.dialog = false
          }, 1000)
        })
      },
      ...mapMutations({
        setTitle: 'SET_TITLE'
      })
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../common/sass/mixin";
  .addMember{
    background-color: $bc;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 150;
    .line{
      @include font-dpr(20px);
      text-align: left;
      line-height: 45px;
      padding: 0 28px;
      color: #ef8833;
    }
    .detail-wrapper{
      background-color: #ffffff;
      padding-left: 27px;
      .detail{
        .item{
          border-bottom: 1px solid $borderCor;
          @include font-dpr(24px);
          line-height: 80px;
          padding-right: 30px;
          color: #939393;
          .content{
            display: flex;
            align-items: center;
            .project{
              flex: 1;
              text-align: left;
              color: #454545;
            }
            .info{
              /*display: flex;*/
              /*align-items: center;*/
              flex: 1;
              border: none;
              outline: none;
              text-align: right;
              color: #909090;
              @include placeholderStyle;
              img{
                width: 30px;/*px*/
                height: 30px;/*px*/
                /*margin-left: 16px;*/
                vertical-align: middle;
              }
            }
          }
          &:last-child{
            border: none;
          }
        }
      }
    }
    .btn-wrapper{
      margin: 15px 18px;
      overflow: hidden;
      .btn{
        margin-top: 20px;
        border: 1px solid #e2e2e2;
        border-radius: 10px;
        @include font-dpr(28px);
        line-height: 70px;
        text-align: center;
      }
      .first{
        background-color: $btnCor;
        color: #ffffff;
        &:active{
          background-color: $btnActiveCor;
        }
      }
      /*.second{*/
        /*background-color: #ffffff;*/
        /*color: #ea3323;*/
        /*&:active{*/
          /*background-color: #e5e5e5;*/
        /*}*/
      /*}*/
    }
    .mask{
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100vw;
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 1000;
    }
    .picker{
      position: absolute;
      z-index: 1100;
      bottom: 0;
      width: 100vw;
      @include font-dpr(28px);
      .header{
        line-height: 80px;
        background-color: #f7f7f6;
        padding: 0 18px;
        display: flex;
        align-items: center;
        .cancel{
          line-height: 55px;
          background-color: #59a4e7;
          color: #ffffff;
          padding: 5px 14px;
          border-radius: 10px;
        }
        .title{
          flex: 1;
        }
        .comfirm{
          line-height: 55px;
          background-color: #59a4e7;
          color: #ffffff;
          padding: 5px 14px;
          border-radius: 10px;
        }
      }
      .content{
        background-color: #ffffff;
      }
    }
  }
  .picker-enter-active,.picker-leave-active{
    transition: all ease .3s;
  }
  .picker-enter,.picker-leave-to{
    transform: translateY(100%);
  }
  .picker-enter-to,.picker-leave{
    transform: translateY(0);
  }
</style>
